<template>
  <div class="page-box">
    <el-row type="flex" :gutter="20">
      <el-col :span="6">
        <el-card class="info-card admin-card" style="backgroundColor:#fb6d49">
          <img src="../../assets/common/admin-icon.png">
          <span>管理员用户<br><b>{{ baseInfo.admin_num }} </b>名</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card user-card" style="backgroundColor:#67c23a">
          <img src="../../assets/common/user-icon.png">
          <span>平台注册用户<br><b>{{ baseInfo.user?.total }} </b>名</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card article-card" style="backgroundColor:#e6a23c">
          <img src="../../assets/common/article-icon.png">
          <span>平台文章总数<br><b>{{ baseInfo.article_num }} </b>名</span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card adv-card" style="backgroundColor:#3a7ce7">
          <img src="../../assets/common/adv-icon.png">
          <span>广告位 <b>{{ baseInfo.advpos_num }} </b>个<br> 广告图 <b>{{ baseInfo.advimg_num }} </b>张</span>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" style="margin:20px 0" justify="space-around" :gutter="20" class="data-table">
      <el-col :span="8" style="paddingLeft:0">
        <el-card>
          <template #header>
            <span>最新注册新用户</span>
          </template>
          <el-table :data="baseInfo.new_user" :show-header="false">
            <el-table-column prop="username" width="140px" show-overflow-tooltip />
            <el-table-column prop="sex" width="80px">
              <template #default="{row}">
                {{ row.sex===1?'女':'男' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" show-overflow-tooltip />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>点赞文章排行</span>
          </template>
          <el-table :data="baseInfo.hot_article" :show-header="false">
            <el-table-column prop="title" show-overflow-tooltip />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8" style="paddingRight:0">
        <el-card>
          <template #header>
            <span>用户性别分析</span>
          </template>
          <div id="bar-container" ref="bar-container" />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div id="cate-data">
            1
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getBaseInfo } from '@/api/dashboard'
import echarts from '@/utils/Echarts'

export default {
  data() {
    return {
      baseInfo: {}
    }
  },
  created() {
    // 获取首页所有数据
    this.initData()
  },
  updated() {
    // 渲染echarts
    this.initChart()
  },
  methods: {
    async  initData() {
      const res = await getBaseInfo()
      this.baseInfo = res
    },
    initChart() {
      const pieChart = echarts.init(document.getElementById('bar-container'))
      const barChart = echarts.init(document.getElementById('cate-data'))
      pieChart.setOption(this.setPieOption())
      barChart.setOption(this.setBarOption())
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', function() {
        pieChart.resize()
      })
    },
    setPieOption() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '用户来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.baseInfo.user?.user_woman, name: '女性' },
              { value: this.baseInfo.user?.user_man, name: '男性' }
            ]
          }
        ]
      }
      return option
    },
    setBarOption() {
      const option = {
        title: {
          left: 'center',
          text: '各分类文章发布数量',
          textStyle: {
            fontSize: 20,
            color: '#5470c6'
          }
        },
        xAxis: {
          type: 'category',
          data: this.baseInfo.all_cate.map(item => item.catename)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.baseInfo.all_cate.map(item => item.num),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      return option
    }

  }
}
</script>

<style lang="scss" scoped>
.info-card{
  padding: 5px 0;
  img{
    height: 40px;
    vertical-align: bottom;
    margin-left: 30px;
    margin-right: 20px;
  }
  span{
    display: inline-block;
    color: #fff;
  }
}
:deep(.el-card__header){
  color: #000;
  background-color:#dddddd;
}
.data-table{
  :deep(.el-card__body){
    padding: 0;
  }
}
#bar-container{
  height: 306px;
}
#cate-data{
  height: 400px;
}
</style>
